<template>
  <div class="app-container">
    <el-form :model="listQuery" ref="queryRef">
      <el-form-item label="模型信息" prop="roleName">
        <el-input
          v-model="listQuery.roleName"
          placeholder="模型信息"
          clearable
          size="small"
          style="width: 240px"
          @input="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="layout-content">
      <el-table
        ref="multipleTable"
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          class="selection"
          align="center"
        />
        <el-table-column label="模型" prop="img" width="100px" align="center">
          <template #default="scope">
            <img :src="scope.row.img" alt="" style="margin: 0 auto" />
          </template>
        </el-table-column>

        <el-table-column label="日期" width="110px" prop="date" />
        <el-table-column label="描述" prop="des" min-width="150px" />
        <el-table-column label="模型名字" prop="name" width="100px" />
        <el-table-column label="作者" prop="maker" width="80px" />
        <el-table-column label="状态" width="190px" align="center">
          <template #default="scope">
            <el-space size="5px">
              <el-tag
                v-show="scope.row.state"
                closable
                @close="handleWeekClose(scope.$index, scope.row)"
                >周推荐</el-tag
              >
              <el-tag
                v-show="scope.row.state2"
                type="success"
                closable
                @close="handleRecommendClose(scope.$index, scope.row)"
                >喜欢推荐</el-tag
              >
            </el-space>
          </template>
        </el-table-column>
        <el-table-column align="center" width="230px" label="操作">
          <template #default="scope">
            <el-button size="mini">查看</el-button>

            <el-popconfirm
              confirm-button-text="喜欢推荐"
              cancel-button-text="周推荐"
              confirmButtonType="success"
              cancelButtonType="Primary"
              hide-icon
              title="设置标签"
              @confirm="setLikedRecommend(scope.$index, scope.row)"
              @cancel="setWeekRecommend(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button type="info" size="mini">设置</el-button>
              </template>
            </el-popconfirm>

            <!-- <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="info"
            >设置</el-button
          > -->

            <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="red"
              title="设置标签"
              @confirm="handleDelete(scope.$index, tableData)"
              @cancel="cancelEvent(scope.$index, tableData)"
            >
              <template #reference>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-bottom">
        <el-button
          size="medium"
          type="info"
          :disabled="setButtonState"
          class="setButton"
          @click="selectWeekAllcc"
          >周推荐</el-button
        >
        <el-button
          size="medium"
          type="info"
          :disabled="setLikedButtonState"
          class="setLikedButton"
          @click="selectLikedAllcc"
          >喜欢推荐</el-button
        >
        <pagination
          v-show="total > 0"
          :total="100"
          v-model:page="listQuery.pageNum"
          v-model:limit="listQuery.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
<script setup name="modelList">
import fac from "@/assets/images/face.jpg";
const { proxy } = getCurrentInstance();
const search = ref("");
const total = ref("100");
const setButtonState = ref(false);
const setLikedButtonState = ref(false);
// 获取用户的选中
const multipleSelection = ref("");
const listQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  name: undefined,
});
const tableData = reactive([
  {
    img: fac,
    date: "2016-05-01",
    des: "这是一个模型啊啊啊",
    name: "Jessy",
    maker: "Tom",
    state: true,
    state2: true,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    img: fac,
    date: "2016-05-01",
    des: "这是一个模型啊啊啊",
    name: "Jessy",
    maker: "Tom",
    state: false,
    state2: true,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    img: fac,
    date: "2016-05-01",
    des: "这是一个模型啊啊啊",
    name: "Jessy",
    maker: "Tom",
    state: true,
    state2: true,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    img: fac,
    date: "2016-05-01",
    des: "这是一个模型啊啊啊",
    name: "Jessy",
    maker: "Tom",
    state: false,
    state2: true,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    img: fac,
    date: "2016-05-01",
    des: "这是一个模型啊啊啊",
    name: "Jessy",
    maker: "Tom",
    state: true,
    state2: false,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    img: fac,
    date: "2016-05-01",
    des: "这是一个模型啊啊啊",
    name: "Jessy",
    maker: "Tom",
    state: false,
    state2: false,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    img: fac,
    date: "2016-05-01",
    des: "这是一个模型啊啊啊",
    name: "Jessy",
    maker: "Tom",
    state: true,
    state2: false,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    img: fac,
    date: "2016-05-01",
    des: "这是一个模型啊啊啊",
    name: "Jessy",
    maker: "Tom",
    state2: false,
    state: false,
    address: "No. 189, Grove St, Los Angeles",
  },
]);
function handleDelete(index, rows) {
  rows.splice(index, 1);
}

function cancelEvent(index, rows) {
  console.log("取消了");
}

const handleWeekClose = (index, rows) => {
  proxy.$modal
    .confirm("确认要取消该模型的周推荐吗?")
    .then(() => {
      rows.state = false;
      proxy.$modal.msgSuccess("成功操作");
    })
    .catch(function () {});
};
function handleRecommendClose(index, rows) {
  proxy.$modal
    .confirm("确认要取消该模型的喜欢推荐吗?")
    .then(() => {
      rows.state2 = false;
      proxy.$modal.msgSuccess("成功操作");
    })
    .catch(function () {});
}

// 设置标签
function setLikedRecommend(index, rows) {
  rows.state2 = true;
}
function setWeekRecommend(index, rows) {
  rows.state = true;
}

// 判断是否有选中项
function handleSelectionChange(value) {
  multipleSelection.value = value;
}

// 多选操作周推荐
function selectWeekAllcc() {
  multipleSelection.value.forEach((item) => {
    if (item.state) {
      item.state = false;
    } else {
      item.state = true;
    }
  });
}
function selectLikedAllcc() {
  multipleSelection.value.forEach((item) => {
    if (item.state2) {
      item.state2 = false;
    } else {
      item.state2 = true;
    }
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  listQuery();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  listQuery();
}
</script>
<style lang="scss">
.layout-content {
  .table-bottom {
    position: relative;
    margin-top: 50px;
    .setButton {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
    .setLikedButton {
      position: absolute;
      top: 0;
      left: 110px;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
  }
}
</style>
